<template>
    <v-layout type="main">
        <p class="page-title">想定管理</p>
        <div class="detail-layout">
        <br/>
            <el-form ref="form" :model="formData" :rules="submitRules" label-width="120px" class="alick-add-form">
                <h3 class="add-alike-title">基本信息</h3>
                <el-form-item label="名称" prop="name">
                    <el-input type="text" v-model="formData.name" />
                </el-form-item>
                <el-form-item label="仿真环境" prop="image_id">
                    <div class="select">
                        <el-select  v-model="formData.image_id" class="full-extent-select">
                            <el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </el-form-item>

                <el-form-item label="配图">
                    <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="formData.avatar"
                        @avatarPath="avatarPath" />
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input type="textarea" :rows="3" v-model="formData.desc" />
                </el-form-item>
                <h3 class="add-alike-title">推演方</h3>
                <el-form-item>
                    <div class="outin-box" v-for="(e, i) in deduction_list" :key="i">
                        <div class="outin-input">
                            <div class="outin-input-name">
                                <span class="outin-input-name-title">名称</span>
                                <el-input  class="entrance" v-model="e.name" />
                                <span class="outin-input-name-title">参数</span>
                                <el-input  class="entrance" v-model="e.key" />
                            </div>
                            <span class="outin-handle">
                                <a href="javascript:;" @click="addDeduction()"
                                    v-if="i == deduction_list.length - 1">增加</a>
                                <span v-else class="slot-btn"></span>
                                <a href="javascript:;" @click="delDeduction(i)" v-if="deduction_list.length > 1">删除</a>
                            </span>
                        </div>

                    </div>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" class="none-type" @click="commit">确定</el-button>
                </el-form-item>

            </el-form>
        </div>
    </v-layout>
</template>
  
<script>
import { labelDicts } from '@/utils/maps'
import { addScenario } from '@/api/scenario'
import { getAllImages } from '@/api/image'
export default {
    data() {
        return {
            active: 1,
            formData: { fileSource: '1', visibility: 0, type: 1, engine: 0 },
            submitRules: {
                name: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                image_id: [
                    { required: true, message: "该项为必填项" }
                ],
                desc: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
                ],
            },
            labelDicts,
            imageOptions: [],
            image: {},
            deduction_list: [{ name: null, parameters: null }],
        };
    },
    async created() {
        this.getImages()
    },
    mounted() { },
    destroyed() { },
    methods: {
        setAddForm() {
            this.formData.deduction_list = []
            for (let i = 0; i < this.deduction_list.length; i++) {
                if (this.deduction_list[i].name != null && this.deduction_list[i].name.length > 0) {
                    this.formData.deduction_list.push(this.deduction_list[i])
                }

            }
        },

        async commit() {
            this.setAddForm()
            let ret = await addScenario({ ...this.formData })
            this.formData = ret.data
            this.toDetail()

        },
        async getImages() {
            let ret = await getAllImages({ visibility: '1', type: '3' })
            this.imageOptions = ret.data
        },

        toDetail() {
            let query = {
                id: this.formData.id
            }
            this.$router.push({
                path: '/scenario/code',
                query
            })
        },

        addDeduction() {
            this.deduction_list.push({ name: null, key: null, parameters: null })
        },
        delDeduction(i) {
            this.deduction_list.splice(i, 1)
        },
        avatarPath(data) {
            this.formData.avatar = data;
        },

    },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>